<!-- pages/food/courier.vue -->
<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="title">跑腿任务</text>
      <view class="status-tabs">
        <text 
          :class="{ active: currentStatus === 'all' }"
          @click="switchStatus('all')"
        >全部</text>
        <text 
          :class="{ active: currentStatus === 0 }"
          @click="switchStatus(0)"
        >待接单</text>
        <text 
          :class="{ active: currentStatus === 1 }"
          @click="switchStatus(1)"
        >已接单</text>
        <text 
          :class="{ active: currentStatus === 2 }"
          @click="switchStatus(2)"
        >已完成</text>
      </view>
    </view>

    <!-- 筛选和排序 -->
    <!-- <view class="filter-bar">
      <view class="filter-item" @click="showSortOptions">
        <text>排序</text>
        <image src="/static/arrow-down.png"></image>
      </view>
      <view class="filter-item" @click="showFilterOptions">
        <text>筛选</text>
        <image src="/static/arrow-down.png"></image>
      </view>
     
    </view> -->

    <!-- 任务列表 -->
    <view class="task-list">
      <view class="task-item" v-for="(item, index) in taskList" :key="index" @click="viewTaskDetail(item.id)">
        <view class="task-header">
          <text class="task-id">任务编号: {{ item.pao_order }}</text>
		  <!-- getStatusClass(item.status) -->
          <text class="task-status" >{{ getStatusText(item.status) }}</text>
        </view>
        <view class="task-content">
          <view class="task-info">
            <view class="location">
              <image src="/static/location-icon.png"></image>
              <text class="from">{{ item.college }}</text>
              <image src="/static/arrow-down.png" class="arrow"></image>
              <text class="to">{{ item.address }}</text>
            </view>
            <view class="reward">
              <text class="price">￥{{ item.price }}</text>
              <text class="time">{{formatTime(item.create_time)  }}</text>
            </view>
          </view>
          <view class="task-desc">
            <text>{{ item.remark }}</text>
          </view>
        </view>
        <view class="task-footer" v-if="item.status === 0">
          <button class="accept-btn" @click.stop="acceptTask(item.id, index)">接单</button>
        </view>
      </view>
    </view>

    <!-- 数据为空状态 -->
    <view class="empty-state" v-if="taskList.length === 0 && !isLoading">
      <image src="/static/empty-task.png"></image>
      <text>暂无跑腿任务</text>
      <button class="refresh-btn" @click="refreshTasks">刷新</button>
    </view>

    <!-- 加载中状态 -->
    <view class="loading" v-if="isLoading">
      <u-loadmore :status="loadStatus"></u-loadmore>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStatus: 'pending', // 初始显示待接单任务
      isLoading: false,
      loadStatus: 'loading',
      taskList: [
        {
          id: 'PT20230615001',
          status: 'pending',
          from: '学生餐厅二楼',
          to: '学生公寓3栋502',
          reward: 8,
          createTime: '10:25发布',
          description: '帮忙带一份黄焖鸡米饭，微辣，加一份土豆'
        },
        {
          id: 'PT20230615002',
          status: 'pending',
          from: '图书馆',
          to: '教学楼B栋301',
          reward: 5,
          createTime: '10:15发布',
          description: '帮忙借两本书：《数据结构》和《计算机网络》'
        }
      ],
	  page:1,
	  limit:15,
	  sort:1,
	  status:'',
	  type:'',
	  keyword:''
    };
  },
  onLoad() {
  	this.getPaoList()
  },
  methods: {
	async getPaoList(){
		const params = {
			page:this.page,
			limit:this.limit,
			sort:this.sort,
			status:this.status,
			type:this.type,
			keyword:this.keyword
		}
		const res = await this.$api.get('/pao/list',params,true)
		if(res.data.code === 200) {
			this.taskList = res.data.data.list
		}
		
	},
    // 切换任务状态
    switchStatus(status) {
      if (this.currentStatus === status) return;
      this.currentStatus = status;
      this.loadTasks();
    },
    formatTime(time) {
      const now = new Date()
      const date = new Date(time)
      const diff = (now - date) / 1000 // 秒数差
      
      if (diff < 60) {
        return '刚刚'
      } else if (diff < 3600) {
        return `${Math.floor(diff / 60)}分钟前`
      } else if (diff < 86400) {
        return `${Math.floor(diff / 3600)}小时前`
      } else if (diff < 2592000) {
        return `${Math.floor(diff / 86400)}天前`
      } else {
        return date.toLocaleDateString()
      }
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待接单',
        1: '已接单',
        2: '已完成'
      };
      return statusMap[status] || status;
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const statusClassMap = {
        'pending': 'status-pending',
        'accepted': 'status-accepted',
        'completed': 'status-completed'
      };
      return statusClassMap[status] || '';
    },
    
    // 显示排序选项
    showSortOptions() {
      uni.showActionSheet({
        itemList: ['距离最近', '报酬最高', '发布最早'],
        success: (res) => {
          // 处理排序逻辑
        }
      });
    },
    
    // 显示筛选选项
    showFilterOptions() {
      uni.showActionSheet({
        itemList: ['全部类型', '餐饮配送', '文件传递', '超市代购'],
        success: (res) => {
          // 处理筛选逻辑
        }
      });
    },
    
    // 显示地图
    showMap() {
      uni.navigateTo({
        url: '/pages/food/map'
      });
    },
    
    // 查看任务详情
    viewTaskDetail(id) {
      uni.navigateTo({
        url: `/pages/food/task-detail?id=${id}`
      });
    },
    
    // 接单
    acceptTask(id, index) {
      uni.showModal({
        title: '确认接单',
        content: '确定要接取这个任务吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟接单成功
            this.taskList.splice(index, 1);
            uni.showToast({
              title: '接单成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 刷新任务列表
    refreshTasks() {
      this.isLoading = true;
      setTimeout(() => {
        this.loadTasks();
        this.isLoading = false;
      }, 1000);
    },
    
    // 加载任务列表
    loadTasks() {
      // 根据当前状态加载对应任务列表
      // 实际项目中应从API获取数据
    }
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  padding: 30rpx 24rpx 0;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
  }
  
  .status-tabs {
    display: flex;
    justify-content: space-around;
    border-bottom: 2rpx solid #f5f5f5;
    
    text {
      font-size: 28rpx;
      color: #666;
      padding: 18rpx 0;
      position: relative;
      
      &.active {
        color: #ff6600;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background-color: #ff6600;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 24rpx 0;
  
  .filter-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    
    image {
      width: 24rpx;
      height: 24rpx;
      margin-left: 12rpx;
    }
  }
}

.task-list {
  padding: 24rpx;
}

.task-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .task-id {
      font-size: 24rpx;
      color: #666;
    }
    
    .task-status {
      font-size: 24rpx;
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
    }
    
    .status-pending {
      color: #ff6600;
      background-color: #fff0e6;
    }
    
    .status-accepted {
      color: #10aeff;
      background-color: #e6f7ff;
    }
    
    .status-completed {
      color: #00b42a;
      background-color: #f0fff4;
    }
  }
  
  .task-content {
    padding: 24rpx;
    
    .task-info {
      margin-bottom: 24rpx;
      
      .location {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
        
        .from, .to {
          font-size: 28rpx;
          color: #333;
          max-width: 400rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .arrow {
          width: 24rpx;
          height: 24rpx;
          margin: 0 24rpx;
        }
      }
      
      .reward {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .price {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff6600;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .task-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .task-footer {
    padding: 24rpx;
    border-top: 2rpx solid #f5f5f5;
    display: flex;
    justify-content: flex-end;
    
    .accept-btn {
      background-color: #ff6600;
      color: #fff;
      font-size: 28rpx;
      padding: 12rpx 32rpx;
      border-radius: 32rpx;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 32rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .refresh-btn {
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 48rpx;
    border-radius: 40rpx;
  }
}

.loading {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
}
</style>